<script setup>
import { ref, watch } from 'vue'
import { getPlaylistPage } from '@/api/playlist.js'
import { useRoute } from 'vue-router'
import router from '@/router/index.js'
import { cancelLike, getLikePlaylistPage, like } from '@/api/like.js'
import { ElMessage } from 'element-plus'

const playlists = ref([
  { name: 'Chill Vibes', description: 'Relaxing music to unwind' },
  { name: 'Workout Tunes', description: 'High energy beats' },
  { name: 'Focus Music', description: 'Instrumental music for concentration' }
])

const isLiked = ref(false)
const route = useRoute()
const initLiked = () => {
  if (route.query?.isLiked) {
    isLiked.value = !!route.query.isLiked
  } else {
    isLiked.value = false
  }
}
initLiked()

const searchQuery = ref('')

const goToPlaylistDetail = (playlist) => {
  router.push({ name: 'SongList', query: { playlistId: playlist.id } })
}

const getPlaylistImage = async () => {
  if (isLiked.value) {
    const res = await getLikePlaylistPage({
      pageNum: 1,
      pageSize: 100,
      name: searchQuery.value
    })
    playlists.value = res.data.records
  } else {
    const res = await getPlaylistPage({
      name: searchQuery.value,
      pageNum: 1,
      pageSize: 100
    })
    playlists.value = res.data.records
  }
}
getPlaylistImage()

watch(searchQuery, () => {
  getPlaylistImage()
})

const handelLike = async (playlist) => {
  const res = await like(playlist.id)
  if (res.code === 200) {
    ElMessage.success('收藏成功')
    await getPlaylistImage()
  }
}

const handelCancelLike = async (playlist) => {
  const res = await cancelLike([playlist.id])
  if (res.code === 200) {
    ElMessage.success('取消收藏成功')
    await getPlaylistImage()
  }
}
</script>

<template>
  <div class="playlist-container">
    <h1>All Playlists</h1>
    <el-input
      v-model="searchQuery"
      placeholder="Search by playlist name"
      style="width: 100%; max-width: 400px; margin-bottom: 20px"
    />
    <div class="playlist-list">
      <div
        v-for="(playlist, index) in playlists"
        :key="index"
        class="playlist-item"
        :style="{
          backgroundImage: `url(${playlist.img})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center'
        }"
        @click="goToPlaylistDetail(playlist)"
      >
        <h3>{{ playlist.name }}</h3>
        <p>{{ playlist.description }}</p>
        <div class="playlist-actions">
          <el-button
            type="success"
            size="small"
            v-if="!isLiked"
            @click="handelLike(playlist)"
            >Like
          </el-button>
          <el-button
            type="danger"
            size="small"
            v-if="isLiked"
            @click="handelCancelLike(playlist)"
            >Cancel Like
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.playlist-container {
  margin-top: 50px;
  text-align: center;
}

h1 {
  font-size: 36px;
  font-weight: bold;
  color: #333;
  margin-bottom: 30px;
}

.el-input {
  margin-bottom: 20px;
}

.playlist-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  justify-items: center;
}

.playlist-item {
  width: 100%;
  max-width: 250px;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  position: relative;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.playlist-item:hover {
  cursor: pointer;
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.playlist-item h3 {
  font-size: 18px;
  margin: 10px 0;
}

.playlist-item p {
  font-size: 14px;
  color: #ddd;
  margin-bottom: 20px;
}

.playlist-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.el-button {
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

.el-button:hover {
  transform: scale(1.05);
}

.el-button[type='success']:hover {
  background-color: #4caf50;
  border-color: #4caf50;
}

.el-button[type='danger']:hover {
  background-color: #ff5733;
  border-color: #ff5733;
}

@media (max-width: 768px) {
  h1 {
    font-size: 28px;
  }

  .playlist-item {
    width: 90%;
    max-width: 300px;
  }
}
</style>
